<template>
  <div id="app">
    <div class="maskLayer" v-drag id="containerVeastTree">
        <div class="catalogueHeader">
          <div class="title">目录树</div>
        </div>
        <div id="divTree">
          
        </div>
        <div id="tz" @mousedown="dragEagle">
        </div>
    </div>
  </div>
</template>

<script>


export default {
  name: 'App',
  // 自定义指令给div加 v-drag 实现可拖动
  directives: {
    drag(el, bindings) {
      el.onmousedown = function (e) {
        if (e.target.parentNode.className === "catalogueHeader") {
          var disx = e.pageX - el.offsetLeft;
          var disy = e.pageY - el.offsetTop;
          document.onmousemove = function (e) {
            el.style.left = e.pageX - disx + "px";
            el.style.top = e.pageY - disy + "px";
          };
          document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null;
          };
        }
      };
    },
  },
  data() {
    return {
    }
  },
  methods: {
    dragEagle: function (e) {
      var targetDiv = document.getElementById("containerVeastTree"); //e.target.parentNode.parentNode;.children[0]
      var scrollerHeightdiv = document.getElementById("divTree"); 
      //得到点击时该容器的宽高：
      var targetDivWidth = targetDiv.offsetWidth;
      var targetDivHeight = targetDiv.offsetHeight;
      var scrollerHeight = scrollerHeightdiv.offsetHeight;
      var startX = e.clientX;
      var startY = e.clientY;
      const that = this;
      document.onmousemove = function (e) {
        e.preventDefault();
        //得到鼠标拖动的宽高距离：取绝对值
        var distX = Math.abs(e.clientX - startX);
        var distY = Math.abs(e.clientY - startY);
        //往右方拖动：
        if (e.clientX > startX) {
          targetDiv.style.width = targetDivWidth + distX + "px";
        }
        if (e.clientY > startY) {
          targetDiv.style.height = targetDivHeight + distY + "px";
          scrollerHeightdiv.style.height = scrollerHeight + distY + "px";
        }

        //往左方拖动：
        if (e.clientX < startX) {
          targetDiv.style.width = targetDivWidth - distX + "px";
        }
        if (e.clientY < startY && e.clientY >= 349) {
          targetDiv.style.height = targetDivHeight - distY + "px";
          scrollerHeightdiv.style.height = scrollerHeight - distY + "px";
        }
        //设置最大最小范围：不能无限制缩放，影响体验
        if (parseInt(targetDiv.style.width) >= 500) {
          targetDiv.style.width = 500 + 'px'
        }

        if (parseInt(targetDiv.style.height) >= 700) {
          targetDiv.style.height = 700 + 'px'
        }
      };

      document.onmouseup = function () {
        document.onmousemove = null;
      };
    },
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.maskLayer {
  position: absolute;
  top: 80px;
  left: 0px;
  width: 282px;
  min-width: 300px;
  min-height: 500px;
  background-color: #2b2c2d;
  color: #fff;
  filter: alpha(Opacity=80);
  -moz-opacity: 0.5;
  opacity: 0.8;
  z-index: 101;
}
.catalogueHeader {
  cursor: move;
  width: 100%;
  padding: 0;
  margin: 0;
  background: #000;
}
.catalogueHeader .title {
  padding: 4px;
  font-size: 14px;
  color: yellow;
}
#divTree {
  width: 100%;
  background: pink;
}

#tz {
  bottom: 0;
  right: 0;
  width: 6px;
  background-color: transparent;
  border-right: 1px solid yellow;
  height: 100%;
  cursor: ew-resize;
  z-index: 110;
  position: absolute;
}
#tz:hover {
  border-right: 4px solid yellow;
}

</style>
